<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    // 检查是否有商品数据，如果没有则重定向到Servlet获取数据
    if(request.getAttribute("products") == null) {
        response.sendRedirect("/admin/dashboard");
        return;
    }
%>
        <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
            <html>

            <head>
                <title>管理员控制台 - 茶韵小铺</title>
                <link rel="stylesheet" href="css/style.css?v=3">
                <style>
                    /* 统一使用主体风格变量 */
                    .admin-actions {
                        margin-top: 20px;
                    }

                    /* 导航栏样式优化 */
                    .nav-container {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        padding: 0 20px;
                    }

                    .logo {
                        font-size: 1.8rem;
                        font-weight: 700;
                        color: white;
                        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
                    }

                    .admin-info {
        color: white;
        font-weight: 500;
    }

    .nav-links a {
        color: white;
        text-decoration: none;
        padding: 8px 15px;
        margin: 0 5px;
        border-radius: 4px;
        transition: all 0.2s ease;
    }
    .nav-links a:hover {
        background-color: rgba(255,255,255,0.2);
        transform: translateY(-2px);
    }

    .admin-info {
                        font-size: 1rem;
                        padding: 8px 15px;
                        background-color: rgba(255,255,255,0.2);
                        border-radius: 20px;
                        color: #333;
                        font-weight: 500;
                        text-shadow: 0 1px 2px rgba(0,0,0,0.1);
                        margin-left: 15px;
                    }

                    .admin-action-btn {
                        display: inline-block;
                        margin-right: 10px;
                        padding: 8px 15px;
                        background-color: #60a164;
                        color: white;
                        text-decoration: none;
                        border-radius: 12px;
                        margin-bottom: 10px;
                        transition: all 0.2s ease;
                    }

                    .admin-action-btn:hover {
                        transform: translateY(-2px);
                        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
                    }

                    .product-table {
                        width: 100%;
                        border-collapse: separate;
                        border-spacing: 0;
                        border-radius: var(--border-radius);
                        overflow: hidden;
                        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
                        margin-top: 1.5rem;
                    }

                    .product-table th,
                    .product-table td {
                        padding: 12px 15px;
                        text-align: left;
                    }

                    .product-table th {
                        background-color: #60a164;
                        color: white;
                        font-weight: 600;
                        text-transform: uppercase;
                        font-size: 0.9rem;
                        letter-spacing: 0.5px;
                    }

                    .product-table tbody tr {
                        transition: background-color 0.2s ease;
                    }

                    .product-table tbody tr:hover {
                        background-color: #f0f8f1;
                    }

                    .action-btn {
                        padding: 6px 12px;
                        border-radius: var(--border-radius);
                        text-decoration: none;
                        font-weight: 500;
                        transition: all 0.2s ease;
                        margin-right: 8px;
                    }

                    .edit-btn {
                        background-color: var(--primary-color);
                        color: white;
                    }

                    .delete-btn {
                        background-color: #e74c3c;
                        color: white;
                    }

                    .action-btn:hover {
                        transform: translateY(-2px);
                        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
                    }

                    /* 表格图片样式统一 */
                    .product-table img {
                        border-radius: 8px;
                        transition: transform 0.2s ease;
                    }

                    .product-table img:hover {
                        transform: scale(1.05);
                    }
                </style>
            </head>

            <body>
                <nav class="header">
                    <div class="nav-container">
                        <h1 class="logo">茶韵小铺</h1>
                        <div class="nav-links">
                            <a href="/index.jsp">首页</a>
                            <a href="/admin/product-add.jsp">添加茶品</a>
                            <a href="/admin/logout">退出登录</a>
                        </div>
                        <div class="auth-user-container">
                            <span class="admin-info">管理员</span>
                        </div>
                    </div>
                </nav>

                <div class="container admin-actions">
                    <h2>茶品管理</h2>
                    <div class="product-table-container">
                        <table class="product-table">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>商品图片</th>
                                    <th>名称</th>
                                    <th>价格</th>
                                    <th>描述</th>
                                    <th>类别</th>
                                    <th>库存</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <c:forEach items="${products}" var="product">
                                    <tr>
                                        <td>${product.id}</td>
                                        <td><img src="${product.mainImage}" alt="${product.name}"
                                                style="width: 50px; height: 50px; object-fit: cover;"></td>
                                        <td>${product.name}</td>
                                        <td>￥${product.price}</td>
                                        <td>${product.description}</td>
                                        <td>${product.categoryId}</td>
                                        <td>${product.stock}</td>
                                        <td>
                                            <a href="/admin/product-edit?id=${product.id}"
                                                class="action-btn edit-btn">编辑</a>
                                            <a href="/admin/product-delete?id=${product.id}"
                                                class="action-btn delete-btn">删除</a>
                                        </td>
                                    </tr>
                                </c:forEach>
                            </tbody>
                        </table>
                    </div>
                </div>
            </body>

            </html>